/**
* 图表界面
*/
<template>
  <!-- 组件主盒子 -->
  <div class="stbox">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据可视化</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索，切换 -->
    <el-row :gutter="24">
      <el-col :span="5">
        <div class="stbgc">
          <div class="block">
            <el-date-picker
              v-model="year"
              type="year"
              @change="getdatayear"
              value-format="yyyy"
              placeholder="选择年">
            </el-date-picker>
            <span class="demonstration">年</span>
          </div>
        </div>
      </el-col>
      <el-col :span="3">
        <el-statistic
          group-separator=","
          :value="online.onlinecount"
          title="今日在线人数"
        ></el-statistic>
      </el-col>
      <el-col :span="3">
        <el-statistic
          :value="online.logincount"
          title="今日登录成功人数"
        ></el-statistic>
      </el-col>
    </el-row>
    <!-- 统计图 -->
    <el-row :gutter="24">
      <el-col :span="12" class="text-c">
        <div class="st-gbox">
          <div class="cavasbox" ref="SCEchart"></div>
        </div>
      </el-col>
      <el-col :span="12" class="text-c">
        <div class="st-gbox">
          <div class="cavasbox" ref="SUMEchart"></div>
        </div>
      </el-col>
    </el-row>
    <!-- 统计图 -->
    <el-row :gutter="23">
      <el-col :span="18">
        <div class="stbgc">
          <div class="block">
            <el-date-picker
              v-model="month"
              value-format="yyyy-M"
              @change="getdatamonth"
              default-time="['00:00:00', '23:59:59']"
              type="month"
              placeholder="选择月">
            </el-date-picker>
            <span class="demonstration">年</span>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <div class="st-gbox">
        <div class="cavasbox" ref="logincount"></div>
      </div>
    </el-row> <el-row>
      <div class="st-gbox">
        <div class="cavasbox" ref="onlinecount"></div>
      </div>
    </el-row>
  </div>
</template>
<script type="text/ecmascript-6">
import Chart from 'echarts'
import Request from "../../api/request";

export default {
  name: "welcome",
  data() {
    return {
      online: {
        onlinecount: 0,
        logincount: 0
      },
      year: '2023',
      month: '2023-12',
      machineNo: '',
      type: 'day',
      //  销售总笔数
      SCEoption: {
        legend: {
          top: 1,
          left: 1,
          itemGap: 10,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            fontSize: 12,
            color: "#323232"
          }
        },
        grid: {
          left: 50,
          right: 10,
          top: 30,
          bottom: 30,
          borderWidth: 1
        },
        xAxis: {
          type: 'category',
          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
        },
        yAxis: {
          type: 'value',
        },
        series: [{
          name: '销售总笔数',
          type: 'bar',
          data: [],
          barWidth: 10,
          itemStyle: {
            normal: {
              color: new Chart.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  {offset: 0, color: '#83bff6'},
                  {offset: 0.5, color: '#188df0'},
                  {offset: 1, color: '#188df0'}
                ]
              )
            },
          }
        }]
      },
      //  销售总金额
      SUMoption: {
        legend: {
          top: 1,
          left: 1,
          itemGap: 10,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            fontSize: 12,
            color: "#323232"
          }
        },
        grid: {
          left: 50,
          right: 10,
          top: 30,
          bottom: 30,
          borderWidth: 1
        },
        xAxis: {
          type: 'category',
          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
        },
        yAxis: {
          type: 'value',
        },
        series: [{
          name: '销售总金额',
          type: 'line',
          barGap: 0,
          data: [],
          itemStyle: {
            color: "#108ff9"
          }
        }]
      },
      //  登陆人数
      lodincount: {
        legend: {
          top: 1,
          left: 1,
          itemGap: 10,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            fontSize: 12,
            color: "#323232"
          }
        },
        grid: {
          left: 50,
          right: 10,
          top: 30,
          bottom: 30,
          borderWidth: 1
        },
        xAxis: {
          type: 'category',
          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10',
            '11', '12', '13', '14', '15', '16', '17', '18', '19', '20',
            '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '登录人数',
            type: 'line',
            data: [150, 230, 224, 218, 135, 147, 260],
            itemStyle: {
              color: "#108ff9"
            },
          },

        ]
      },
      //在线人数
      onlinecount: {
        legend: {
          top: 1,
          left: 1,
          itemGap: 10,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            fontSize: 12,
            color: "#323232"
          }
        },
        grid: {
          left: 50,
          right: 10,
          top: 30,
          bottom: 30,
          borderWidth: 1
        },
        xAxis: {
          type: 'category',
          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10',
            '11', '12', '13', '14', '15', '16', '17', '18', '19', '20',
            '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '在线人数',
            type: 'line',
            data: [],
            itemStyle: {
              color: "#108ff9"
            },
          },

        ]
      }

    }
  },
  // 导入组件
  components: {
    // 点聚合组件
  },

  // 挂载结束状态(里面是操作)
  mounted() {
    this.getdata()
  },
  // 里面的函数只有调用才会执行
  methods: {

    getdata() {
      this.getdatayear()
      this.getdatamonth()
      Request.get("/online/today")
        .then(res => {
          this.online = res.data.data
        })
    },
    getdatayear() {
      Request.get(
        "/order/data?year=" + this.year)
        .then(res => {
          this.SUMoption.series[0].data = res.data.data[0]
          this.SCEoption.series[0].data = res.data.data[1]
          this.getSCE()
          this.getSUM()
        })
    },
    getdatamonth() {
      Request.get(
        "/online?date=" + this.month)
        .then(res => {
          this.lodincount.series[0].data = res.data.data[0]
          this.onlinecount.series[0].data = res.data.data[1]
          this.getLoginCount()
          this.getOnlineCount()
        })
    },
    // 交易总笔数
    getSCE() {
      this.chart = Chart.init(this.$refs.SCEchart)

      this.chart.setOption(this.SCEoption)
    },
    // 交易总金额
    getSUM() {
      this.chart = Chart.init(this.$refs.SUMEchart)
      this.chart.setOption(this.SUMoption)
    },
    getLoginCount() {
      this.chart = Chart.init(this.$refs.logincount)
      this.chart.setOption(this.lodincount)
    },
    getOnlineCount() {
      this.chart = Chart.init(this.$refs.onlinecount)
      this.chart.setOption(this.onlinecount)
    },


  }
};
</script>
<style>
.stbox {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.stbgc {
  background-color: #fff;
  height: 60px;
  line-height: 60px;
  border-radius: 5px;
  padding: 0px 16px;
}

.stsearch {
  text-align: center;
}

.text-c {
  text-align: center;
}

.st-gbox {
  background-color: #fff;
  margin-top: 20px;
  border-radius: 5px;
  height: 30vh;
  box-sizing: border-box;
  padding: 10px;
}

.cavasbox {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

.paybox {
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 5px;
  margin-top: 20px;
  height: 32vh;
}
</style>
